<template>
    <div class="message-area-container">
        <!--  作为中间组件，向上和向下传递数据  -->
        <DataForm v-on="$listeners"/>
        <h3>
            {{ title }}
            <span>{{ subTitle }}</span>
        </h3>
        <DataList :list="list"/>
        <div class="loading" v-loading="isListLoading"></div>
    </div>
</template>

<script>
import DataForm from "./DataForm";
import DataList from "./DataList";

export default {
    props: {
        title: {
            type: String,
            default: "",
        },
        subTitle: {
            type: String,
            default: "",
        },
        list: {
            type: Array,
            default: () => [],
        },
        isListLoading: {
            type: Boolean,
            default: false,
        },
    },
    components: {
        DataForm,
        DataList,
    },
};
</script>

<style scoped lang="less">
.loading {
    position: relative;
    height: 100px;
}
</style>
